<%@ page language="java" pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<!DOCTYPE html>
<html>
	<head>
		<meta http-equiv="Content-Type" content="UTF-8">
		<title>红酒会 - 智能红酒管家</title>
		<link rel="shortcut icon" type="image/x-icon" href="${ctx}/favicon.ico" />
		<link rel="stylesheet" href="http://libs.baidu.com/bootstrap/2.3.2/css/bootstrap.min.css" />
		<link rel="stylesheet" href="http://libs.baidu.com/bootstrap/2.3.2/css/bootstrap-responsive.min.css" />
		<link rel="stylesheet" href="${ctx}/static/styles/style.css" />
	</head>
<body>
	
	<c:import url="/header"></c:import>
	
	<div class="container" id="container">
		<div class="row">
		
			<!-- 菜单栏 -->
			<div class="span2">
				<c:import url="menu.jsp">
					<c:param name="menu">password</c:param>
					<c:param name="userId">${id}</c:param>
				</c:import>
			</div>	
			
			<!-- 内容 -->
			<div class="span6">
				<div>
					<ul class="breadcrumb">
						<li><a href="${ctx}/user/${id}">用户中心</a> <span class="divider">/</span></li>
	  					<li class="active">修改密码</li>
					</ul>
				</div>
				<div>
					<form id="form" class="form-horizontal" action="${ctx}/user/password" method="post">
						<c:if test="${not empty result}">
							<c:choose>
								<c:when test="${result}">
									<div class="alert alert-success">
										<strong>操作成功！</strong>您的新密码已修改成功！
									</div>
								</c:when>
								<c:otherwise>
									<div class="alert alert-error">
										<strong>操作失败！</strong>旧密码输入错误！
									</div>
								</c:otherwise>
							</c:choose>
						</c:if>
						<div class="control-group">
							<label class="control-label" for="oldPass">
								<span style="color:red;"><strong>*</strong></span>
								旧密码</label>
							<div class="controls">
								<input type="password" id="oldPass" name="oldPass">
								<span id="error_oldPass"></span>
							</div>
						</div>
						<div class="control-group">
							<label class="control-label" for="password">
								<span style="color:red;"><strong>*</strong></span>
								新密码</label>
							<div class="controls">
								<input type="password" id="password" name="password">
								<span id="error_password"></span>
							</div>
						</div>
						<div class="control-group">
							<label class="control-label" for="rePass">
								<span style="color:red;"><strong>*</strong></span>
								确认密码</label>
							<div class="controls">
								<input type="password" id="rePass" name="rePass">
								<span id="error_rePass"></span>
							</div>
						</div>
						<div class="control-group">
					    	<div class="controls">
					      		<button type="submit" class="btn btn-primary">&nbsp;&nbsp;&nbsp;提&nbsp;&nbsp;&nbsp;交&nbsp;&nbsp;&nbsp;</button>
					    	</div>
					  	</div>
					</form>
				</div>
			</div>
			
			<!-- 侧栏 -->
			<div class="span4">
				<c:import url="/talk/right" />
			</div>
		</div>
	</div>
	
	<script type="text/javascript" src="${ctx}/static/scripts/jquery.validate.min.js"></script>
	<script type="text/javascript">
		$(function() {
			$('#form').validate({
				rules: {
					oldPass: 'required',
					password: {
						required: true,
						rangelength: [6,20]
					},
					rePass: {
						equalTo: '#password'
					}
				},
				messages: {
					oldPass: '请填写旧密码',
					password: {
						required: '请填写新密码',
						rangelength: '新密码长度只能{0}到{1}位'
					},
					rePass: {
						equalTo: '两次密码输入不一致'
					}
				},
				errorElement: 'em',
				errorPlacement: function(error, element) {
					error.appendTo($("#error_" + element.attr("id")));
				},
				submitHandler: function(form) {
					form.submit();
				}
			});
		});
	</script>
</body>
</html>